<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="contaner">
      <div id="myid" class="box">123</div>
      <div id="myid" class="box">222</div>
    </div>
    <script>
      // 1.野路子 通过id名称来获取dom元素；(了解);
      // console.log(myid);
      // 2.id名称获取 元素
      // var ele = document.getElementById("myid");
      // // console.log(ele);
      // ele.onclick = function(){
      //     console.log("123");
      // }
      // 3.通过类名获取元素；
      // var eles = document.getElementsByClassName("box");
      // eles[0].onclick = function(){
      //     console.log(111);
      // }
      // 4.可以通过标签名称
      // var eles = document.getElementsByTagName("div");
      // eles[0].onclick = function(){
      //     console.log(333);
      // }

      // 5.通过 querySelector获取 可以通过css方式获取元素 注意 只能获取一个元素；
      // var ele = document.querySelector(".box");
      // var ele = document.querySelector(".contaner div");
      // console.log(ele);

      // 6.通过 querySelectorAll 获取多个元素；
      // var eles = document.querySelectorAll(".contaner div");
      // console.log(eles);
      // 7. 获取的元素是什么类型？ 元素对象；

      //   var ele = document.querySelector(".box");
      //   console.log(typeof ele);
      //   console.dir(ele);
    </script>
  </body>
</html>
